<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3.2.31/dist/vue.global.prod.js"></script>
    <script>
        // let msg = "测试数据";
        // 1、页面装载完成后将msg数据渲染到H5标签和input输入框中，作为默认值展示
        // 2、监听input输出框的用户输入操作，并同步完成h5标签的更新和js msg 变量的更新
        // 3、添加按钮事件，当被点击时，以弹出框的方式提示最新的msg变量值
        window.onload = function(){
            // console.log(Vue)
            const app = Vue.createApp({
                // data 是vue的运行环境的数据仓库配置数据
                data:function(){
                    return {
                        msg:"测试数据"
                    }
                },
                // methods 是vue的运行环境的方法仓库配置数据
                methods:{
                    showTip:function(){
                        alert(this.msg)
                    }
                }
            });
            // 将vue构建的程序对象和页面的元素容器构建成连接关系
            app.mount("#app")
        }
    </script>
</head>
<body>
    <div id="app">
        <h1>{{ msg }}</h1>
        <h2>{{ msg }}</h2>
        <h3>{{ msg }}</h3>
        <h4>{{ msg }}</h4>
        <h5>{{ msg }}</h5>
        <input type="text" v-model="msg">
        <br><br>
        <input type="button" value="弹框" v-on:click="showTip()">
    </div>
</body>
</html>